<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->

    <!-- 新增数据弹窗 -->
    <el-dialog
      title="审核"
      :visible.sync="showAdd"
      @close="showAdd = false"
      width="20%"
    >
        <el-form>
            <el-form-item label="审核结果">
                <!-- <el-input v-model="auditResult" type="textarea" autosize style="width: 150px"/> -->
                <el-select v-model="auditResult" placeholder="请选择新岗位名称" style="width:120px">
                  <el-option :value="'1'" label="同意"/>
                  <el-option :value="'0'" label="不同意"/>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showAdd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="addfacility"
            >审核</el-button
            >
        </div>
    </el-dialog>


    <div class="filter-container">
      <!-- style="width: 150px;margin-right:15px;" -->
        <el-select 
             v-model="param.originalWorkCenter" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             @focus="getCenterList" 
             placeholder="请选择原工作中心"
             class="ul-item">
             <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
        </el-select>

        <el-select
             v-model="param.originalJobCategory" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             placeholder="请选择原岗位类别"
             class="ul-item">
             <el-option :value="item" :label="item" v-for="(item,index) in this.jobCategoryList" :key="index"/>
        </el-select>

        <el-select 
             v-model="param.originalJobTitle" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             @focus="getjobTitle" 
             placeholder="请选择原岗位名称"
             class="ul-item">
             <el-option :value="item.jobTitle" :label="item.jobTitle" v-for="(item,index) in this.jobTitleList" :key="index"/>
        </el-select>

        <el-select 
             v-model="param.nowWorkCenter" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             @focus="getCenterList" 
             placeholder="请选择新工作中心"
             class="ul-item">
             <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
        </el-select>

        <el-select
             v-model="param.nowJobCategory" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             placeholder="请选择新岗位类别"
             class="ul-item">
             <el-option :value="item" :label="item" v-for="(item,index) in this.jobCategoryList" :key="index"/>
        </el-select>

        <el-select 
             v-model="param.nowJobTitle" 
             clearable      
             filterable
             style="margin-right: 15px;width: 150px"
             @focus="getjobTitle" 
             placeholder="请选择新岗位名称"
             class="ul-item">
             <el-option :value="item.jobTitle" :label="item.jobTitle" v-for="(item,index) in this.jobTitleList" :key="index"/>
        </el-select>

        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button
        type="button"
        v-waves
        class="el-button el-button--warning"
        @click="cancelSubmit"
        >
        重置</el-button>
        <el-button type="primary" v-waves @click="getAudit">审核列表</el-button>

    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="姓名"  prop="userName" align="center"/>
      <el-table-column label="工号"  prop="jobNumber" align="center"/>
      <el-table-column label="转岗前" align="center">
          <el-table-column label="原工作中心"  prop="originalWorkCenter" align="center"/>
          <el-table-column label="原岗位类别"  prop="originalJobCategory" align="center"/>
          <el-table-column label="原岗位名称"  prop="originalJobTitle" align="center"/>
          <el-table-column label="原直接主管"  prop="originalUserName" align="center"/>
          <el-table-column label="审核情况"  prop="originalParentAudit" align="center"/>
      </el-table-column>
      <el-table-column label="转岗后" align="center">
          <el-table-column label="工作中心"  prop="nowWorkCenter" align="center"/>
          <el-table-column label="岗位类别"  prop="nowJobCategory" align="center"/>
          <el-table-column label="岗位名称"  prop="nowJobTitle" align="center"/>
          <el-table-column label="直接主管"  prop="nowUserName" align="center"/>
          <el-table-column label="审核情况"  prop="nowParentAudit" align="center"/>
      </el-table-column>
      <el-table-column label="修改人员"  prop="updateJobNumber" align="center"/>
      <el-table-column label="申请时间"  prop="createTime" align="center"/>
      <el-table-column label="培训内容"  prop="trainingContent" align="center" width="200"/>
      <el-table-column label="转岗时间"  prop="jobTransferTime" align="center"/>
      <el-table-column label="操作" fixed="right" align="center" width="180">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
<!-- <el-button v-if="auditBool" size="mini" type="primary" :disabled="(row.originalParentNumber != userInfo.jobNumber && row.originalParentAudit != '未审核')||(row.nowParentNumber != userInfo.jobNumber && row.nowParentAudit != '未审核')" @click="audited1(scope.row)">审核</el-button> -->
<el-button v-if="auditBool" size="mini" type="primary"  @click="audited1(scope.row)">审核</el-button>
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button> -->
                    <el-button
                        icon="el-icon-delete"
                        class="el-button el-button--danger"
                        style="font-size: 15px;"
                        @click="handleDelete(scope.row,scope.$index)"
                    ></el-button>
                </div>
            </template>
      </el-table-column>
    </el-table>

    <!-- 修改数据弹窗 -->
    <el-dialog
      title="修改工序信息"
      :visible.sync="showupd"
      @close="showupd = false"
      width="35%"
    >
        <el-form :inline="true" :model="updForm" ref="updForm" :rules="addRules">
            <el-form-item label="条码" prop="code" >
                <el-input v-model="updForm.code" type="textarea" autosize  style="width: 150px"/>
            </el-form-item>
            <el-form-item label="点检内容" prop="content" >
                <el-input v-model="updForm.content" type="textarea" autosize style="width: 300px"/>
            </el-form-item>
        </el-form>

        <!-- 公共底部 -->   
        <div slot="footer" class="dialog-footer">
            <el-button @click="showupd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="updprocess('updForm')"
            >修改</el-button
            >
        </div>
    </el-dialog>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { configurationAdd,configurationUpd } from "@/api/processRoute"
import { transferFind,knowledgeFind,transferSave,transferUpd,transferDel,findAudit,transferAudit } from "@/api/knowledgeSkill"
import mixin from '../../utils/mixin.js'
export default {
    name: 'employeeTransfer',
    mixins: [mixin],
    data () {
        return {
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
                code: '',                      
                content: ''                    
            },
            total: 0,                                      //数据的总数
            tableInfo: [],
            tableMX:[],
            showMX: false,
            loadingList: false,
            loading: false,
            centerList: [],                         //工作中心列表
            createForm: {}, 
            updForm: {},
            props: { multiple: true },
            // 表单校验
            addRules: {
                code: [
                    { required: true, message: "条码不能为空!", trigger: "change" },
                ],
                content: [
                    { required: true, message: "点检内容不能为空!", trigger: "change" },
                ],
            },
            showAdd: false,
            showupd: false,
            userInfo: this.$store.state.user.userInfo,
            barcodeType1List: [],
            accessTypeList: ['出库','入库'],
            barcodeType3List: [],
            jobTitleList:[],
            jobCategoryList: ['1线','1.5线','2线'],
            auditResult:'',
            auditBool: false,
            auditedForm:{}
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
      bool(row){
        // (row.originalParentNumber != userInfo.jobNumber && row.originalParentAudit != '未审核')||(row.nowParentNumber != userInfo.jobNumber && row.nowParentAudit != '未审核')
      },
      async getAudit(){
        this.auditBool = true
        const res = await findAudit()
        this.total = res.data.length
        this.tableInfo = res.data
      },
      // 审核
      async audited1(row){
        this.showAdd = true
        this.auditedForm = Object.assign({},row)
      },
      // 提交审核
      addfacility(formName) {
          if(!this.auditResult) return this.$message.error('请选择审核结果！')
          this.auditedAffirm()
        },
      async auditedAffirm(){
        let query = {id:this.auditedForm.id}
        if(this.auditedForm.originalParentNumber == this.userInfo.jobNumber){ 
          if(this.auditResult == 1){
            query.originalTrueBool = true
            query.originalParentAudit = '同意'
          }else{
            query.originalTrueBool = false
            query.originalParentAudit = '不同意'
          }
        }
        if(this.auditedForm.nowParentNumber == this.userInfo.jobNumber){
          if(this.auditResult == 1){
            query.nowBool = true
            query.nowParentAudit = '同意'
          }else{
            query.nowBool = false
            query.nowParentAudit = '不同意'
          }
        }
        const res = await transferAudit(query)
        console.log(res)
        if(res.code == '500') return
        if(res.code != '1') return this.$message.error(errmsg)
        this.$message.success(res.msg)
        this.showAdd = false
        this.getAudit()
      },
        // 获取岗位
    async getjobTitle(){
      const res = await knowledgeFind({page:1,  limit:10000,rankOfPosition:1})
      this.jobTitleList = res.data.list
    },
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.auditBool = false
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(this.param.nowWorkCenter){ query.nowWorkCenter = this.param.nowWorkCenter}
            if(this.param.nowJobCategory){ query.nowJobCategory = this.param.nowJobCategory}
            if(this.param.nowJobTitle){ query.nowJobTitle = this.param.nowJobTitle}
            if(this.param.originalWorkCenter){ query.originalWorkCenter = this.param.originalWorkCenter}
            if(this.param.originalJobCategory){ query.originalJobCategory = this.param.originalJobCategory}
            if(this.param.originalJobTitle){ query.originalJobTitle = this.param.originalJobTitle}
            let data = await transferFind(query)
            let errmsg = data.msg
            this.loadingList = false
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errmsg)
            this.total = data.data.count
            this.tableInfo = data.data.list
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            userName: '姓名',
            jobNumber: '工号',
            originalWorkCenter: '原工作中心',
            originalJobCategory: '原岗位类别',
            originalJobTitle: '原岗位名称',
            originalUserName: '原直接主管',
            originalParentAudit: '审核情况',
            nowWorkCenter: '新工作中心',
            nowJobCategory: '新岗位类别',
            nowJobTitle: '新岗位名称',
            nowUserName: '新直接主管',
            nowParentAudit: '审核情况',
            updateJobNumber: '修改人员',
            createTime: '申请时间',
            trainingContent: '培训内容',
            jobTransferTime: '转岗时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        handleDelete(row,index) {
            this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delprocess(row,index)
            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
            })
        },
        async delprocess(row,index){
          let res = await transferDel({id: row.id})
          if(res.code == '500') return
          if(res.code != '1') return this.$message.error(res.msg)
          this.tableInfo.splice(index,1)
          this.$message.success(res.msg)
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          if(this.param.nowWorkCenter){ query.nowWorkCenter = this.param.nowWorkCenter}
          if(this.param.nowJobCategory){ query.nowJobCategory = this.param.nowJobCategory}
          if(this.param.nowJobTitle){ query.nowJobTitle = this.param.nowJobTitle}
          let arr = await transferFind(query)
          if(arr.code == '500') return
          if(arr.code != '1'){
            this.loading = false
            return this.$message.error(errmsg)
          }
          if(!arr.data.list.length){
            this.loading = false
            this.$message.error('暂无数据')
          }
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '员工转岗记录', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              userName: item.userName,
              jobNumber: item.jobNumber,
              originalWorkCenter: item.originalWorkCenter,
              originalJobCategory: item.originalJobCategory,
              originalJobTitle: item.originalJobTitle,
              originalUserName: item.originalUserName,
              originalParentAudit: item.originalParentAudit,
              nowWorkCenter: item.nowWorkCenter,
              nowJobCategory: item.nowJobCategory,
              nowJobTitle: item.nowJobTitle,
              nowUserName: item.nowUserName,
              nowParentAudit: item.nowParentAudit,
              updateJobNumber: item.updateJobNumber,
              createTime: item.createTime,
              trainingContent: item.trainingContent,
              jobTransferTime: item.jobTransferTime,
            }
            arr1.push(obj)
          })
          return arr1
        },
        cancelSubmit(){
            this.param = {
                code: '',           
                content: '',      
            }
            this.listQuery.page = 1
            this.handleFilter()
        },
        
        resetForm(){
             this.$refs.createForm.resetFields();
        },
        handleEdit(row){
            this.updForm = Object.assign({},row)
            this.showupd = true
        },
        // 提交表单之前先进行验证
        updprocess(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.configurationUpd()
                } else {
                    return false
                }
            })
        },
        async configurationUpd(){
            let query = Object.assign({},this.updForm)
            delete query.createTime
            delete query.updateTime
            const data = await configurationUpd(query)
            const errMsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errMsg)
            this.showupd = false
            this.handleFilter()
            this.$message.success(errMsg)
        },
        addInOrOut(){
            this.showAdd = true
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

.btn-add{
    margin-bottom: 28px;
}

.ul-item{
  width: 85%;
}
</style>
